<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;"/>
<title>店铺详情</title>
<link type="text/css" href="layer_mobile/need/layer.css" rel="stylesheet" />
<link rel="stylesheet" href="touchTouch/touchTouch.css" type="text/css" />
<link rel="stylesheet" href="css/shop-detail.css" type="text/css" />
<script type="text/javascript" src="js/Jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/Phone/phone.js"></script>
<script type="text/javascript" src="touchTouch/touchTouch.jquery.js" ></script>
<script type="text/javascript" src="layer_mobile/layer.js"></script>
</head>

<body>
<div class="whole">
    <div class="detail-pic">
        <div class="headPic" id="thumbs">
            <a href="images/img-1.jpg" style="background-images: url(images/img-1.jpg);"></a>
            <a href="images/img-1.jpg" style="background-images: url(images/img-1.jpg);"></a>
            <a href="images/img-1.jpg" style="background-images: url(images/img-1.jpg);"></a>
        </div>
        <a class="back" href="javascript:history.go(-1);"><img src="images/back.png" width="100%" /></a>
        <div class="share"><img src="images/share.png" width="100%" /></div>
        <div class="number">1/3</div>
        <script>
            $(function(){
                $('#thumbs a').touchTouch();
            });
        </script>
    </div>
    
    <div class="detail-content">
        <div class="detail-head">
          
        <div class="detail-con">
            <h3>美食店</h3>
            <p>人均:<span>100左右</span><a>各种菜式</a><a>东莞地区范围<a><a>有优惠，欢迎来品尝！</a></p>
            <p><span class="collect"></span><span><a class="num-people">1668</a>人收藏</span></p>
            <p><span>地址在东莞范围内</span><a href="maps.html" class="maps"></a></p>
        </div>
        <div class="detail-res">
            <h3>推荐理由</h3>
            <p>明星最爱去的美食店，评价高！</p>
            <p>室外花园草坪宽敞开阔 最适合赏景闲聊</p>
            <p>价格不贵却道道菜都精致 食材十分考究</p>
            <p>联系电话：123456789<p>
            <a href="#">查看详情 ></a>
        </div>
    </div>
    
    <div class="overhead">
        <h3>附加信息</h3>
        <div class="overhead_list">
            <div class="over-common wifi">
                <p><img src="images/wifi.png" width="100%" /></p>
                <p>wi-fi</p>
                <p>每天10:30-11:00</p>
                <p><a href="#">在线客服></a></p>
            </div>
            <div class="over-common party">
                <p><img src="images/party.png" width="100%" /></p>
                <p>适合小聚</p>
                <p>12:00-23:00</p>
                <p><a href="tel:123456789">电话客服></a></p>
            </div>
        </div>
    </div>
</div>

<div class="footer">
	<a class="foot_list collect_foot">
    	<p></p>
        <p>收藏</p>
    </a>
    <a class="foot_list edit">
    	<p><img src="images/pinglun.png" width="100%" /></p>
        <p>写评论</p>
    </a>
    <a class="order" href="#">立即预约</a>
</div>
<script type="text/javascript">
$(function(){
	$('.collect_foot').on('click',function(){
		$(this).toggleClass('colle');
		if($(this).hasClass('colle')){
			$(this).children('p:last-child').text('已收藏');
		}else{
			$(this).children('p:last-child').text('收藏');
		}
	});	
	$('.edit').on('click',function(){
		$('.order-content').addClass('order_active');
	});
	$('.pl').on('click',function(){
		var textcon = $(this).parent().find('.order-con').val().length;
		if(textcon==0){
			tipshow('亲爱的，您还没有添加评论哦！');
		}else{
			$('.order-content').removeClass('order_active');
			tipshow('亲爱的，您的评论已成功提交！');
		}
	});
	
	function tipshow(content){
		layer.open({
			content: content
			,skin: 'msg'
			,time: 2 //2秒后自动关闭
		  });	
	}
})
</script>

<div class="order-content">
	<div class="order-cc">
    	<textarea class="order-con" placeholder="请在此输入您的评论！"></textarea>
        <div class="pl">提交</div>
    </div>
</div>

<div class="shaer-menu">
	<ul class="share-list">
    	<li>
        	<p><img src="images/weixin.png" width="100%" /></p>
            <p>微信好友</p>
        </li>
        <li>
        	<p><img src="images/pengyouquan.png" width="100%" /></p>
            <p>朋友圈</p>
        </li>
        <li>
        	<p><img src="images/qqhaoyou.png" width="100%" /></p>
            <p>QQ好友</p>
        </li>
        <li>
        	<p><img src="images/qqkongjian.png" width="100%" /></p>
            <p>QQ空间</p>
        </li>
        <li>
        	<p><img src="images/xinlangweibo.png" width="100%" /></p>
            <p>新浪微博</p>
        </li>
        <li>
        	<p><img src="images/tengxunweibo.png" width="100%" /></p>
            <p>腾讯微博</p>
        </li>
        <li>
        	<p><img src="images/renrenwang.png" width="100%" /></p>
            <p>人人网</p>
        </li>
        <li>
        	<p><img src="images/doubanwang.png" width="100%" /></p>
            <p>豆瓣网</p>
        </li>
        <div class="close"><img src="images/downs.png" width="100%" /></div>
    </ul>
</div>
<script type="text/javascript">
$(function(){
	$('.share').on('click',function(){
		$('.shaer-menu').addClass('activ');
	});
	
	$('.close').on('click',function(){
		$('.shaer-menu').removeClass('activ');
	});
})
</script>
</body>
</html>
